<template>
  <div class="camera-list-view">
    <div class="tree-container flex-1 overflow-y-auto">
      <el-tree
        v-if="treeData.length > 0"
        :data="treeData"
        :props="treeProps"
        node-key="id"
        :default-expand-all="false"
        :default-expanded-keys="defaultExpandedKeys"
        :current-node-key="selectedNode?.id"
        :highlight-current="true"
        @node-click="handleNodeClick"
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
        class="menu-tree"
      >
        <template #default="{ data }">
          <div class="tree-node flex items-center">
            <!-- 文件夹节点 -->
            <template v-if="data.type === 'folder'">
              <el-icon class="mr-2">
                <Folder />
              </el-icon>
              <span class="node-label">{{ data.name }}</span>
            </template>
            
            <!-- 摄像头节点 -->
            <template v-else-if="data.type === 'camera'">
              <el-checkbox 
                :model-value="selectedCameras.includes(data.id)"
                @change="handleCameraCheckboxChange(data)"
                class="mr-3"
              />
              
              <!-- 状态图标 -->
              <div class="status-icon mr-3">
                <el-icon 
                  v-if="data.status === 1" 
                  class="text-green-500"
                  :class="{ 'text-green-600': selectedCameras.includes(data.id) }"
                >
                  <Location />
                </el-icon>
                <el-icon 
                  v-else 
                  class="text-gray-400"
                >
                  <Location />
                </el-icon>
              </div>
              
              <span 
                class="camera-name flex-1 text-sm"
                :class="{ 'text-gray-900 font-medium': selectedCameras.includes(data.id), 'text-gray-600': !selectedCameras.includes(data.id) }"
              >
                {{ data.name }}
              </span>
              
              <!-- 操作按钮 -->
              <el-button 
                size="small" 
                text 
                @click.stop="handleSelectCamera(data)"
                class="ml-2"
              >
                <el-icon><VideoCamera /></el-icon>
                查看录像
              </el-button>
            </template>
          </div>
        </template>
      </el-tree>
      
      <div v-else-if="loading" class="loading-container flex items-center justify-center h-32">
        <el-icon class="is-loading text-2xl text-blue-500">
          <Loading />
        </el-icon>
        <span class="ml-2 text-gray-500">加载中...</span>
      </div>
      
      <div v-else class="empty-container flex items-center justify-center h-32 text-gray-500">
        <span>暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ElButton,
  ElIcon,
  ElTree,
  ElCheckbox
} from 'element-plus'
import {
  Folder,
  Loading,
  VideoCamera,
  Location
} from '@element-plus/icons-vue'
import type { Device } from '@/types'

// Props
interface Props {
  treeData: any[]
  loading?: boolean
  selectedNode?: any
  defaultExpandedKeys?: string[]
  selectedCameras?: number[]
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  selectedNode: null,
  defaultExpandedKeys: () => [],
  selectedCameras: () => []
})

// Emits
const emit = defineEmits<{
  nodeClick: [node: any]
  cameraSelect: [camera: Device]
  cameraCheckboxChange: [camera: Device, checked: boolean]
  nodeExpand: [node: any]
  nodeCollapse: [node: any]
}>()

// 树形组件配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 方法
const handleNodeClick = (node: any) => {
  emit('nodeClick', node)
}

const handleNodeExpand = (node: any) => {
  emit('nodeExpand', node)
}

const handleNodeCollapse = (node: any) => {
  emit('nodeCollapse', node)
}

const handleSelectCamera = (camera: Device) => {
  emit('cameraSelect', camera)
}

const handleCameraCheckboxChange = (camera: Device) => {
  const isChecked = props.selectedCameras.includes(camera.id)
  emit('cameraCheckboxChange', camera, !isChecked)
}


// 摄像头选择通过复选框直接处理
</script>

<style scoped lang="scss">
.camera-list-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tree-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: 700px;
}

.tree-node {
  padding: 4px 0;
  
  .node-label {
    font-size: 14px;
    color: #374151;
  }
}

.menu-tree {
  :deep(.el-tree) {
    overflow: visible;
  }
  
  :deep(.el-tree-node__content) {
    height: 36px;
    border-radius: 4px;
    margin: 2px 0;
    
    &:hover {
      background-color: #f3f4f6;
    }
  }
  
  :deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    font-weight: 500;
  }
  
  :deep(.el-tree-node.is-current > .el-tree-node__content:hover) {
    background-color: #bfdbfe !important;
  }
}

.empty-container,
.loading-container {
  background-color: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
}
</style>
